import Loading from '@/component/Loading';
import loadable from '@loadable/component'

import { RouterProps } from '.';

export const AsyncPage: any = loadable(
  (props: RouterProps) => {
    document.title = props?.title || '博客'
    return import(/* webpackChunkName: '[request]' */ `@/${props.element}`)
  },
  {
    fallback: <Loading />,
    ssr: true,
  },
)


const NestedRoute: any = (route: RouterProps[]) => {
  return route.map(item => {
    if (item?.children && item?.children?.length > 0) {
      return { ...item, element: <AsyncPage {...item}></AsyncPage>, children: NestedRoute(item.children) }
    }
    return ({ ...item, element: <AsyncPage {...item}></AsyncPage> })
  })
}

export default NestedRoute